<template>
    <div class="edit-box">
        <p style="font-size:20px;margin-top:-5%"><i class="el-icon-edit"></i>请编辑</p>
        <div class="la-cover">
            <div class="cover-title">
                <span>网格封面：</span> 
            </div>
            <div class="cover-input">
                <input type="file" v-on:change="previewImg()" ref="fileInput" > 
            </div>
            <div class="cover-img">
                <img :src="latticeObject.latticeCover" style="height:80px;width:80px;">
            </div>
        </div>
        <div class="la-name">
            <span class="name">网格名称：</span> 
            <el-input v-model="latticeObject.latticeName" style="width:50%" placeholder="请输入网格名称"></el-input>
        </div>
        <div class="la-addr">
            <span class="addr">网格地址：</span> 
            <el-input v-model="latticeObject.latticeSkipWebsite" style="width:50%" placeholder="请输入网格地址"></el-input>
        </div>
        <div class="la-notice">
            <span class="notice">网格说明：</span> 
            <el-input type="textarea" v-model="latticeObject.latticeNotice" style="width:50%" placeholder="请输入网格注意事项"></el-input>
        </div>
        <div class="edit-btn">
            <el-button @click="conformEdit(false)">取 消</el-button>
            <el-button type="primary" @click="conformEdit(true)">确 定</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name:"editData",
    props:{
        latticeObject:{}
    },
    created(){
        
    },
    data(){
        return{

        }
    },
    watch:{
        'latticeObject.latticeCover'(newValue, oldValue){
            if(newValue === oldValue){
                this.latticeObject.latticeCover = ""
            }

        },
        'latticeObject.latticeName'(newValue, oldValue){
            if(newValue === oldValue){
                this.latticeObject.latticeName = ""
            }
        },
        'latticeObject.latticeSkipWebsite'(newValue, oldValue){
            if(newValue === oldValue){
                this.latticeObject.latticeSkipWebsite = ""
            }
        },
        'latticeObject.latticeNotice'(newValue, oldValue){
            if(newValue === oldValue){
                this.latticeObject.latticeNotice = ""
            }
        }
    },
    methods:{
        updateLattice(){
            console.log("修改参数：",this.latticeObject);
            this.$http.post("/latticeNoteOperator/latticeLike/updateLatticeNoteInfo",this.latticeObject).then(res=>{
                if(res.data.data && res.data.code === "0000"){
                    this.$message.success("修改成功")
                    this.$emit('closeDialog',"true");
                }else{
                    this.$message.error("修改失败,请重新操作")
                }
            }).catch(err =>{
                this.$message.error("修改失败:"+err)
            })
        },
        conformEdit(val){
            if(!val){
                this.currentLatticeObj={}
                this.latticeObject={}
            }else{
                this.updateLattice()
            }
            this.$emit('closeDialog',"true");
        },
        previewImg() {
            const file = this.$refs.fileInput.files[0]
            const fileReader = new FileReader()
            fileReader.onload = (temp) => {
                this.latticeObject.latticeCover= temp.target.result
                this.newLatticeObj.latticeCover = temp.target.result
            }
            fileReader.readAsDataURL(file)
            this.fileReader = fileReader
        },
    }
}
</script>

<style scoped>
.edit-box{
  width: 100%;
}
.edit-box .edit-btn{
  text-align: center;
  margin-top: 20px;
  margin-bottom: -20px;
}

.la-cover{
    width: 100%;
    height: 80px;
}
.la-cover .cover-title{
    width: 20%;
    height: 100%;
    line-height: 80px;
    margin-left: 10px;
    font-size: 18px;
    font-weight: 500;
    /* background-color: blue; */
    float: left;
}
.la-cover .cover-input{
    width: 30%;
    height: 80px;
    line-height: 80px;
    /* background-color: aqua; */
    float: left;
}
.la-cover .cover-img{
    width: 30%;
    height: 80px;
    float: left;
    /* background-color: blueviolet; */
}
.la-name .name{
    margin-left: 10px;
    font-size: 18px;
    font-weight: 500;
}
.la-name ,.la-addr , .add-btn ,.la-notice{
    margin-top: 2%;
}
.la-addr .addr{
    margin-left: 10px;
    font-size: 18px;
    font-weight: 500;
}
.la-notice .notice{
    margin-left: 10px;
    font-size: 18px;
    font-weight: 500;
}
.la-cover .add-btn{
    clear: both;
}

</style>